<script lang="ts" setup>
import type { TreeSelectProps } from 'ant-design-vue';

import { reactive, ref } from 'vue';

import { useVbenModal } from '@vben/common-ui';

import {
  Form,
  FormItem,
  Input,
  message,
  Radio,
  RadioGroup,
  TreeSelect,
} from 'ant-design-vue';

import {
  getCategoryInfoApi,
  getCategoryPageApi,
  storeCategoryApi,
  updateCategoryApi,
} from '#/api';

const gridApi = ref();
const record = ref();
const formRef = ref();
const treeData = ref<TreeSelectProps['treeData']>([
  { id: 0, pid: 0, name: '顶级分类', children: [] },
]);

const labelCol = { span: 5 };
const wrapperCol = { span: 17 };

const formData = reactive<any>({
  name: '',
  image: '',
  pid: 0,
  order: 100,
  status: 1,
});

// 验证规则
const rules = {
  pid: [{ required: true, message: '请选择上级分类', trigger: 'blur' }],
  name: [{ required: true, message: '请填写分类名称', trigger: 'blur' }],
  order: [{ required: true, message: '请填写排序顺序', trigger: 'blur' }],
  status: [{ required: true, message: '请选择显示状态', trigger: 'blur' }],
};

const [Modal, modalApi] = useVbenModal({
  // 重置表单
  onBeforeClose() {
    formRef.value.resetFields();
  },
  // 取消按钮
  onCancel() {
    modalApi.close();
  },
  // 确认提交
  onConfirm() {
    // 表单验证
    formRef.value.validate().then(() => {
      modalApi.setState({ loading: true, confirmLoading: true });
      const data = formData;
      const id = record.value.id;
      const Api = id ? updateCategoryApi(id, data) : storeCategoryApi(data);
      Api.then(() => {
        message.success('操作成功');
        gridApi.value?.reload();
        modalApi.close();
      }).finally(() => {
        modalApi.setState({ loading: false, confirmLoading: false });
      });
    });
  },
  // 打开模态框回调
  onOpenChange(isOpen: boolean) {
    record.value = isOpen ? modalApi.getData()?.record || {} : {};
    gridApi.value = isOpen ? modalApi.getData()?.gridApi : null;
    formData.pid = isOpen ? modalApi.getData()?.pid || 0 : 0; // 默认选中顶级分类
    if (isOpen) {
      // 获取上级分类列表
      getCategoryPageApi().then((data) => {
        // 将后端数据追加到顶级分类的子节点中
        treeData.value[0].children = data;
      });
      if (record.value.id && record.value) {
        getCategoryInfoApi(record.value.id).then((data) => {
          Object.assign(formData, data);
        });
      }
    }
  },
});
</script>
<template>
  <Modal class="w-[600px]">
    <Form
      ref="formRef"
      :label-col="labelCol"
      :model="formData"
      :rules="rules"
      :wrapper-col="wrapperCol"
    >
      <FormItem label="上级分类" name="pid">
        <TreeSelect
          v-model:value="formData.pid"
          :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
          :field-names="{ label: 'name', value: 'id' }"
          :tree-data="treeData"
          placeholder="选择上级分类"
          style="width: 100%"
          tree-default-expand-all
        />
      </FormItem>
      <FormItem label="分类名称" name="name">
        <Input v-model:value="formData.name" />
      </FormItem>
      <FormItem label="图标" name="image">
        <Input v-model:value="formData.image" />
      </FormItem>
      <FormItem label="排序" name="order">
        <Input v-model:value="formData.order" />
      </FormItem>
      <FormItem label="状态" name="status">
        <RadioGroup v-model:value="formData.status" button-style="solid">
          <Radio :value="1">显示</Radio>
          <Radio :value="0">隐藏</Radio>
        </RadioGroup>
      </FormItem>
    </Form>
  </Modal>
</template>
